<template>
  <div class="comments-list-wrap">
    <comment-box @comment="getCommentList" />
    <!-- 评论详情 -->
    <div class="comment-list">
      <div
        class="lx__comment-detail flex"
        v-for="item in commentList"
        :key="item.id"
      >
        <!-- 头像 -->
        <img class="lx__comment-avatar" :src="item.avatar" />

        <div style="flex: 1; padding-left: 12px">
          <!-- 评论信息 -->
          <div class="flex flex--b">
            <div>
              <span class="commentInfo-username">{{ item.username }}</span>
              <span class="commentInfo-master" v-if="item.createBy === createBy"
                >作者</span
              >
              <span class="commentInfo-other">{{ item.createTime }}</span>
            </div>
            <div class="commentInfo-reply" @click="onReply(item)">
              <span>回复</span>
            </div>
          </div>
          <!-- 评论内容 -->
          <div class="commentInfo-content">
            <span v-html="item.content"></span>
          </div>
          <!-- 子评论 -->
          <div v-if="item.children && item.children.length">
            <div
              class="lx__comment-detail flex"
              v-for="childItem in item.children"
              :key="childItem.id"
            >
              <!-- 头像 -->
              <img
                class="lx__comment-avatar is-child"
                :src="childItem.avatar"
              />

              <div style="flex: 1; padding-left: 12px">
                <!-- 评论信息 -->
                <div class="flex flex--b">
                  <div>
                    <span class="commentInfo-username-small">{{
                      childItem.username
                    }}</span>
                    <span
                      class="commentInfo-master"
                      v-if="childItem.createBy === createBy"
                      >作者</span
                    >
                    <span class="commentInfo-other">{{
                      childItem.createTime
                    }}</span>
                  </div>
                  <div @click="onReplyChild(item, childItem)">
                    <span class="commentInfo-reply">回复</span>
                  </div>
                </div>
                <!-- 评论内容 -->
                <div class="commentInfo-content">
                  <span
                    v-if="childItem.toCommentUserName"
                    style="color: rgb(3, 169, 244)"
                    >@{{ childItem.toCommentUserName }}:
                  </span>

                  <span v-html="childItem.content"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination-box flex flex--c">
        <div
          class="next-page-btn"
          @click="goToPage"
          v-if="pagination.total > commentList.length"
        >
          更多
        </div>
        <div
          class="end-text"
          v-if="commentList.length && commentList.length >= pagination.total"
        >
          ~~到底了
        </div>
        <div class="end-text" v-if="!commentList.length">~~空空如也</div>
      </div>
    </div>
  </div>
  <comment-dialog
    v-if="dialog.show"
    v-model="dialog.show"
    :root-id="dialog.rootId"
    :to-comment-id="dialog.toCommentId"
    :to-comment-user-id="dialog.toCommentUserId"
    @comment="getCommentList"
  />
</template>
<script lang="ts" setup>
import { queryCommentList } from "@/api/comment.api";
import { CommentListVo, CommentVo } from "@/types/comment";
import { onMounted, reactive, ref, toRaw, watch } from "vue";
import { useRoute } from "vue-router";
import CommentBox from "./CommentBox.vue";
import CommentDialog from "./CommentDialog.vue";
const props = defineProps({
  author: {
    type: String,
    defatult: "",
  },
});
const createBy = ref("");
const articleId = ref("");
const dialog = reactive({
  show: false,
  rootId: "",
  toCommentId: "",
  toCommentUserId: "",
});
watch(
  () => props.author,
  (val) => {
    createBy.value = val || "";
  }
);
const route = useRoute();
const pagination = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});
const commentList = ref<CommentListVo>([]);
const getCommentList = async () => {
  const { pageNo, pageSize } = toRaw(pagination);
  if (!articleId.value) return;
  const params = {
    pageNo,
    pageSize,
    articleId: articleId.value,
  };
  const res = await queryCommentList(params);
  if (res.code == 200) {
    const list = res.data ? res.data.rows : [];
    commentList.value = commentList.value.concat(list);
    pagination.total = res.data ? res.data.total : 0;
  }
};
const goToPage = () => {
  ++pagination.pageNo;
  getCommentList();
};
const onReply = (vo: CommentVo) => {
  dialog.show = true;
  dialog.rootId = vo.id;
  dialog.toCommentId = vo.id;
  dialog.toCommentUserId = "-1";
};
const onReplyChild = (parent: CommentVo, child: CommentVo) => {
  dialog.show = true;
  dialog.rootId = parent.id;
  dialog.toCommentId = child.id;
  dialog.toCommentUserId = child.createBy || "";
};
onMounted(() => {
  const id = route.query.id as string;
  if (id) {
    articleId.value = id;
    commentList.value = [];
    getCommentList();
  }
});
</script>
<style lang="scss" scoped>
.commentInfo-title {
  margin-bottom: 20px;
  color: #797979;
  user-select: none;
}

.comment-list {
  margin-top: 40px;
}
.lx__comment-detail {
  align-items: flex-start;
}
.lx__comment-avatar {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  &.is-child {
    width: 30px;
    height: 30px;
  }
}

.commentInfo-username {
  color: #ef794f;
  font-size: 16px;
  font-weight: 600;
  margin-right: 5px;
}

.commentInfo-username-small {
  color: #ef794f;
  font-size: 14px;
  font-weight: 600;
  margin-right: 5px;
}

.commentInfo-master {
  background-color: #67c23a;
  border: 1px solid #67c23a;
  color: #fff;
  border-radius: 0.2rem;
  font-size: 12px;
  padding: 2px 4px;
  margin-right: 5px;
}

.commentInfo-other {
  font-size: 12px;
  color: #797979;
  user-select: none;
}

.commentInfo-reply {
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  color: #fff;
  background: orange;
  border-radius: 0.2rem;
  padding: 3px 6px;
}

.commentInfo-content {
  margin: 15px 0 25px;
  padding: 18px 20px;
  background: #f7f9fe;
  border-radius: 12px;
  color: #000;
  word-break: break-word;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.pagination-box {
  height: 70px;
  .next-page-btn {
    padding: 13px 15px;
    border: 1px solid #ddd;
    border-radius: 3rem;
    color: #797979;
    width: 100px;
    user-select: none;
    cursor: pointer;
    text-align: center;
    &:hover {
      border: 1px solid orange;
      color: orange;
      box-shadow: 0 0 5px orange;
    }
  }
}
</style>
